<template>
  <div>
    <el-submenu ref="subMenu" :index="routerInfo.name">
      <template slot="title">
<!--        <i class="el-icon-monitor"></i>-->
<!--         <i class="icon-spot">·</i>-->
        <i :class="'el-icon-'+routerInfo.meta.icon"></i>
        <span slot="title">{{ routerInfo.meta.title }}</span>
      </template>
      <slot></slot>
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: "AsyncSubmenu",
  props: {
    routerInfo: {
      default: function() {
        return null;
      },
      type: Object,
    },
  },
};
</script>
<style lang="scss">
.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}
.icon-spot {
  font-size: 22px;
  margin-right: 10px;
}
.el-menu--collapse > div > .el-menu-item span {
  display: none;
}
</style>
